import React from "react";
import { Input, Modal, Icon, Button, message } from "antd";
import { connect } from "dva";

class EditPaneModal extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			name: "",
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	/**
	 * 打开modal并初始化数据
	 * @returns {*}
	 */
	openModal = (initData) => {
		this.setState({ visible: true, ...initData });
	};

	/**
	 * 关闭modal
	 * @returns {*}
	 */
	closeModal = () => {
		this.setState({ visible: false, name: undefined, id: undefined }, () => {
			this.props.getTabList();
		});
	};

	/**
	 * input改变
	 * @returns {*}
	 */
	changeName = e => {
		this.setState({ name: e.target.value });
	};

	/**
	 * 确定
	 * @returns {*}
	 */
	updateCategory = e => {
		e.stopPropagation();
        e.preventDefault();
		let { name, id } = this.state;
		if (id && id != undefined) {
			this.props.setCategory(name, id)
		} else {
			this.props.setCategory(name)
		}
	};

	render() {
		const { visible, name } = this.state;
		return (
			<Modal title={"新增/编辑分类"} visible={visible} onCancel={this.closeModal} onOk={this.updateCategory} destroyOnClose>
				<Input value={name} onChange={(e) => this.changeName(e)} />
			</Modal>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(EditPaneModal);
